<html>
	<head>
		<title>观察者模式</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<script>
			var ObserverObj = {/**//*依赖对象*/

				FirstName : "Max",

				LastName : "Gan",

				Id : 1

			}

			var ObserverManager = {/**//*观察器*/

				Observers : [], /**//*观察对象集*/

				AddObserver : function(item) {/**//*加入观察对象*/

					this.Observers.push(item);

				},

				Change : function(obj) {/**//*改变对象行为*/

					for (var item in obj) {

						ObserverObj[item] = obj[item];

					}//改变数据依赖对象数据

					for (var i = 0, len = this.Observers.length; i < len; i++) {

						var item = this.Observers[i];

						item.Display();
						//对象改变后，改变观察对象的行为Display; 为统一的接口

					}

				}
			}
			/*==================
			 * 注册
			 =================*/

			var Header = function() {/**//*观察对象Header*/

				this.Display = function() {

					alert(ObserverObj.FirstName);

				}
			}
			var Content = function() {/**//*观察对象Content*/

				this.Display = function() {

					alert(ObserverObj.LastName);

				}
			}
			var Foot = function() {/**//*观察对象Foot*/

				this.Display = function() {

					alert(ObserverObj.Id);

				}
			}
			/***绑定观察器动作***/

			ObserverManager.AddObserver(new Header());

			ObserverManager.AddObserver(new Content());

			ObserverManager.AddObserver(new Foot());
		</script>
	</head>
	<body>
		<!--使用方法-->

		<a href="javascript://" onclick="ObserverManager.Change({FirstName:'老婆'});">改变FirstName</a>

		<a href="javascript://" onclick="ObserverManager.Change({LastName:'是母老虎'});">改变LastName</a>

		<a href="javascript://" onclick="ObserverManager.Change({Id:2});">改变Id</a>
	</body>

</html>